<template>
    <div class="top-image" :style="imageStyle">
        <slot></slot>
    </div>
</template>

<script lang="ts" setup>
import { getImageUrl } from '@/utils/core';
import { computed } from 'vue';

const props = withDefaults(defineProps<{
    src?: string
    alt?: string
    width?: string
    height?: string
}>(), {
    alt: '图片',
});

const imageStyle = computed(() => {
    return {
        backgroundImage: `url(${getImageUrl(props.src)})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        backgroundAttachment: 'fixed',
        width: props.width || '100%',
        height: props.height || '90vh',
    }
});

</script>

<style scoped>
</style>